<template>
	<view class="tabThree">
		<view class="tabThree-top">
			<view class="tabThree-top-left" @click="getIndex">
				<image :src="list.img" mode="aspectFill"></image>
				<text>{{list.username || '未登录'}}</text>
			</view>
			<view class="tabThree-top-right" @click="getset">
				<image src="https://www.kmdj2018.com/Uploads/zfb/set.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="tabThree-rmd">
			<view class="tabThree-rmd-title">
				推荐有礼
				<image src="https://www.kmdj2018.com/Uploads/zfb/rmd.png" mode="aspectFit"></image>
			</view>
			<view class="tabThree-rmd-flex">
				<view @click="getnav('/pages/recpo/recpo',1)">
					<view class="tabThree-rmd-flex-num">
						{{TUiUser.type1}}<text>元</text>
					</view>
					<view class="tabThree-rmd-flex-text">
						奖励在路上
					</view>	
				</view>
				<view @click="getnav('/pages/recpo/recpo',2)">
					<view class="tabThree-rmd-flex-num">
						{{TUiUser.type2}} <text>元</text>
					</view>
					<view class="tabThree-rmd-flex-text">
						已获得
					</view>	
				</view>
				<view @click="getnav('/pages/recpo/recpo',3)">
					<view class="tabThree-rmd-flex-num">
						{{TUiUser.type3}} <text>元</text>
					</view>
					<view class="tabThree-rmd-flex-text">
						已发放
					</view>	
				</view>
			</view>
		</view>
		<view class="tabThree-list">
			<listImg title="意见反馈" src="https://www.kmdj2018.com/Uploads/zfb/my01.png" @click="getYj"></listImg>
			<listImg title="关于我们" src="https://www.kmdj2018.com/Uploads/zfb/my02.png" @click="getTiao('关于我们')"></listImg>
			<listImg title="用户协议" src="https://www.kmdj2018.com/Uploads/zfb/my03.png" @click="getTiao('用户协议')"></listImg>
			<listImg title="隐私协议" src="https://www.kmdj2018.com/Uploads/zfb/my04.png" @click="getTiao('隐私协议')"></listImg>
			<listImg title="地址管理" src="https://www.kmdj2018.com/Uploads/zfb/my04.png" @click="getadd"></listImg>
		</view>
	</view>
</template>

<script>
	import listImg from '@/components/listImg/listImg.vue'
	export default {
		data() {
			return {
				list:{
					username:'',
					img:'https://www.kmdj2018.com/Uploads/zfb/moren.png'
				},
				TUiUser:{
					type1:0,
					type2:0,
					type3:0,
				},
			};
		},
		components: {
			listImg
		},
		onShow() {
			this.init()
		},
		methods:{
			getIndex(){
				if(!this.list.username){
					this.getnav('/pages/index/index')
				}
			},
			getset(){
				if(!this.list.username){
					this.getnav('/pages/index/index')
				}else{
					this.getnav('/pages/setup/setup')
				}
			},
			init() {
				this.$request("User/index", {
					data: {
			
					},
					isLoad: false
				}).then(res => {
					if(res.result){
						this.list = res.result
					}
					
				})
				this.$request("User/TUiUser", {
					data: {
			
					},
					isLoad: false
				}).then(res => {
					this.TUiUser = res
				})
			},
			getTiao(title){
				// console.log('点击',title)
				this.getnav1('/pages/etailedArticle/etailedArticle',title)
			},
			getYj(){
				this.getnav1('/pages/opinion/opinion')
			},
			getadd(){
				this.getnav1('/pages/addlist/addlist')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabThree {}

	.tabThree-top {
		background-color: #fff;
		padding: 54rpx 32rpx 32rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tabThree-top-left{
			display: flex;
			align-items: center;
			image{
				width: 112rpx;
				height: 112rpx;
				border-radius: 100rpx;
			}
			text{
				margin-left: 32rpx;
				color: #333;
				font-size: 36rpx;
				font-weight: 500;
			}
		}
		.tabThree-top-right{
			image{
				width:48rpx;
				height: 48rpx;
			}
		}
	}
	.tabThree-rmd{
		padding: 32rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.tabThree-rmd-title{
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			image{
				width: 36rpx;
				height: 36rpx; 
				margin-left: 12rpx;
			}
			margin-bottom: 32rpx;
		}
		.tabThree-rmd-flex{
			display: flex;
			justify-content: space-between;
			>view{
				width: 200rpx;
				height: 220rpx;
				border-radius: 40rpx;
				.tabThree-rmd-flex-num{
					font-size:48rpx;
					font-weight: bold;
					margin-top: 60rpx;
					text-align: center;
					text{
						font-size:28rpx;
						margin-left: 10rpx;
					}
				}
				.tabThree-rmd-flex-text{
					text-align: center;
					margin-top: 28rpx;
					color: #333333;
					font-size: 28rpx;
				}
			}
			>view:nth-child(1){
				background-color: rgba(255, 242, 206, .3);
				.tabThree-rmd-flex-num{
					color: #E5A803;
					text{
						color: #E5A803;
					}
				}
			}
			>view:nth-child(2){
				background-color: rgba(225, 238, 255, .3);
				.tabThree-rmd-flex-num{
					color: #1078FF;
					text{
						color: #1078FF;
					}
				}
			}
			>view:nth-child(3){
				background-color: rgba(231, 225, 255, .3);
				.tabThree-rmd-flex-num{
					color: #5C37E0;
					text{
						color: #5C37E0;
					}
				}
			}
		}
	}
	.tabThree-list{
		background-color: #fff;
		margin-top: 20rpx;
	}
</style>
